<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link rel="stylesheet" type="text/css" href="demos.css"/> -->
		<!-- <link rel="stylesheet" href="../../css/bootstrap.min.css"> -->
		<style type="text/css">
			#app{
				width: 700px;
				margin: 80px auto;
			}
			table{
				margin-top: 10px;
				text-align: center;
			}
			input{
				height: 22px;
			}
			.overlay{
				position: fixed;
				background: rgba(0,0,0,0.7);
				z-index: 6;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			}
			.con{
				width: 420px;
				height: 300px;
				background-color: #fff;
				transform: translate3d(-50%,-50%,0);
				position: absolute;
				top: 50%;
				left: 50%;
				padding: 20px;
			}
			.content table{
				border: 1px solid #ccc;
				padding: 0;
				border-collapse: collapse;
				table-layout: fixed;
				margin-top: 10px;
				width: 100%;
			}
			table td, table th {
			    height: 30px;
			    border: 1px solid #ccc;
			    /* background: #fff; */
			    font-size: 15px;
			    padding: 3px 3px 3px 8px;
			}
			.add,.delAll{
				height: 28px;
				width: 50px;
			}
			button{
				border: transparent;
			}
			.btn{
				width: 45px;
				height: 24px;
				border-radius: 6px;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="container" id="app">
		    <div>
		        <input type="text" placeholder="search" @input="search" list="cars" class="search" />
		        <datalist id="cars">
		            <option v-for="item in searchlist" :value="item"></option>
		        </datalist>
		        <button type="button" class="add" @click="add">添加</button>
				<button type="button" class="delAll">删除</button>
		    </div>
		    <div>
		        <table>
		            <tr>
					   <th><input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()" /></th>
		               <th width="50px">序号</th>
		               <th width="130px">书名</th>
		               <th width="130px">日期</th>
		               <th width="130px">单价</th>
		               <th width="130px">数量</th>
		               <th width="130px">操作</th>
		            </tr>
		            <tr v-cloak v-for="(item, index) of slist">
						<td><input type="checkbox" id="Runoob" value="1" v-model="checkedname" /></td>
		                <td>{{ index + 1 }}</td>
		                <td>{{ item.name }}</td>
		                <td>{{ item.price }}</td>
		                <td>{{ item.tdate }}</td>
		                <td>
							<button type="button">-</button>
							{{ item.count }}
							<button type="button">+</button>
						</td>
		                <td>
							<button type="button" class="btn" style="background-color: #00BFFF;	" @click="showOverlay(index)">修改</button>
							<button type="button" class="btn" style="background-color: red;"  @click="del(index)">删除</button>
		                </td>
		            </tr>
		        </table>
		    </div>
		    <model :list="selectedlist" :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
		</div>
		
		<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component('model', {
			    props: ['list', 'isactive'],
			    template: `<div class="overlay" v-show="isactive">
			                <div class="con">
			                    <h2 class="title" style="margin-left: 160px;">新增 | 修改</h2>
			                    <div class="content" style="width: 300px;margin: 0 auto;">
			                        <table>
			                            <tr>
			                                <td style="width:50px;">书名</td>
			                                <td><input type="text" v-model="modifylist.name"></td>
			                            </tr>
			                            <tr>
			                                <td>价格</td>
			                                <td><input type="text" v-model="modifylist.price"></td>
			                            </tr>
			                            <tr>
			                                <td>日期</td>
			                                <td>
												<input type="date" v-model="modifylist.tdate" style="width:170px">
			                                </td>
			                            </tr>
			                            <tr>
			                                <td>数量</td>
			                                <td>
												<input type="text" v-model="modifylist.count">
			                                </td>
			                            </tr>
			                            </tr>
			                        </table>
			                        <p>
			                            <input type="button" @click="changeActive" value="取消">
			                            <input type="button" @click="modify" value="保存">
			                        </p>
			                    </div>
			                </div>
			            </div>`,
			    computed: {
			        modifylist() {
			            return this.list;
			        }
			    },
			    methods: {
			        changeActive() {
			            this.$emit('change');
			        },
			        modify() {
			            this.$emit('modify', this.modifylist);
			        }
			    }
			});
			var app = new Vue({
			    el: '#app',
			    data: {
			        isActive: false, // 是否显示弹窗
			        selected: -1, // 选择了哪条记录
			        selectedlist: {}, // 选中的信息
			        slist: [],
			        searchlist: [],
					checkedname: [],
					checked: false,
					checkedArr: ["1"],
			        list: [
			            {
			                name: '红楼梦',
			                price: '99.00',
			                tdate: '2020-08-16',
			                count: '1',
			            },
			            {
			                name: '水浒传',
			                price: '89.00',
			                tdate: '2001-09-19',
			                count: '1',
			            },
			            {
			                name: '三国演义',
			                price: '90.60',
			                tdate: '2020-08-16',
			                count: '1',
			            },
			            {
			                name: '西游记',
			                price: '12.90',
			                tdate: '2001-09-19',
			                count: '1',
			            },
			            {
			                name: '十万个为什么',
			                price: '69.00',
			                tdate: '1999-10-02',
			                count: '2',
			            }
			        ]
			    },
			    created() {
			        this.setSlist(this.list);
			    },
			    methods: {
					//全选
					changeAllChecked: function() {
						if (this.checked) {
							this.checkedname = this.checkedArr
						} else {
							this.checkedname = []
						}
					},
			        // 修改数据
			        showOverlay(index) {
			            this.selected = index;
			            this.selectedlist = this.list[index];
			            this.changeOverlay();
			        },
			        // 点击保存按钮
			        modify(arr) {
			            if (this.selected > -1) {
			                Vue.set(this.list, this.selected, arr);
			                this.selected = -1;
			            } else {
			                this.list.push(arr);
			            }
			            this.setSlist(this.list);
			            this.changeOverlay();
			        },
					//添加
			        add: function() {
			            this.selectedlist = {
			                name: '',
			                price: '',
			                tdate: '',
			                count: '',
			            };
			            this.selected = -1;
			            this.isActive = true;
			        },
					//删除
			        del(index) {
			            this.list.splice(index, 1);
			            this.setSlist(this.list);
			        },
			        changeOverlay() {
			            this.isActive = !this.isActive;
			        },
			        // 获取需要渲染到页面中的数据
			        setSlist(arr) {
			            this.slist = JSON.parse(JSON.stringify(arr));
			        },
			        // 搜索
			        search(e) {
			            var v = e.target.value,
			                self = this;
			            self.searchlist = [];
			            if (v) {
			                var ss = [];
			                // 过滤需要的数据
			                this.list.forEach(function(item) {
			                    if (item.name.indexOf(v) > -1) {
			                        if (self.searchlist.indexOf(item.name) == -1) {
			                            self.searchlist.push(item.name);
			                        }
			                        ss.push(item);
			                    } else if (item.price.indexOf(v) > -1) {
			                        if (self.searchlist.indexOf(item.price) == -1) {
			                            self.searchlist.push(item.price);
			                        }
			                        ss.push(item);
			                    }
			                });
			                this.setSlist(ss); // 将过滤后的数据给了slist
			            } else {
			                // 没有搜索内容，则展示全部数据
			                this.setSlist(this.list);
			            }
			        }
			    },
			    watch: {}
			});
		</script>
	</body>
</html>
